﻿@page "/"

<p>We observe here the following behaviors</p>

<ul>
    <li>If you call your method from the same component, you don't need StateHasChanged()</li>
    <li>If you call the same method from outside the component (from parent), the method needs to call StateHasChanged() otherwise the component won't re-render the result.</li>
</ul>

<p>Note: Components are within red boxes.</p>

<div style="margin:30px">
<i>Component Uses Variable</i>
<div style="padding:10px;border:2px solid red;">
    <CounterVariable @ref="Variable" />
</div>
<hr />
<i>The following buttons come from parents</i>
<br/>
<button type="button" @onclick="IncrementVariable">Click</button>
<button type="button" @onclick="IncrementVariable2">Click with StateHasChanged()</button>
</div>

<div style="margin:30px">
<i>Component Uses Property</i>
<div style="padding:10px;border:2px solid red;">
    <CounterProperty @ref="Property" />
</div>

<hr />
<i>The following buttons come from parents</i>
<br/>
<button type="button" @onclick="AddToPropertyList">Add To List</button>
<button type="button" @onclick="AddToPropertyList2">Add To List with StateHasChanged()</button>

<br/><br/>
<button type="button" @onclick="IncrementProperty">Click</button> 
<button type="button" @onclick="IncrementProperty2">Click with StateHasChanged()</button>

</div>

@code{
    CounterVariable Variable;

    CounterProperty Property;

    void IncrementVariable () {
        Variable.Increment();
    }

    void IncrementVariable2 () {
        Variable.IncrementWithStateHasChanged();
    }

    void IncrementProperty() {
        Property.Increment();
    }

    void IncrementProperty2() {
        Property.IncrementWithStateHasChanged();
    }

    void AddToPropertyList(){
        Property.AddToList();
    }

    void AddToPropertyList2(){
        Property.AddToListStateHasChanged();
    }
}